<template>
  <div>
    <h1>App组件</h1>
    <hr />

    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Game'">游戏</button>
    <button @click="comp = 'Movie'">电影</button>

    <!-- 
      可以使用keep-alive 组件来缓存组件
       keep-alive包裹动态组件时，默认会缓存所以不活动的组件实例，而不是销毁它们
        include 字符串或正则表达式 只有名称匹配的组件会被缓存
        exclude 字符串或正则表达式 只有名称不匹配的组件会被缓存
        max 数字 最多可以缓存多少组件实例
    -->

    <!-- 
      如何监听已经被keep-alive缓存的组件失活和激活????使用两个生命周期函数
        - activated:被 keep-alive 缓存的组件激活时调用
        - deactivated:被 keep-alive 缓存的组件失活时调用
     -->
    <keep-alive>
      <component :is="comp"></component>
    </keep-alive>
  </div>
</template>

<script>
/*
  只有动态组件使用异步组件才有意义
  异步组件
    在大型应用中，我们可能需要将应用分割成小一些的代码块 并且只有在需要的时候才从服务器加载一个模块
    Vue允许以一个函数的方式注册你的组件
    Vue只有在这个组件需要被渲染的时候才会触发该工厂函数 且会把结果缓存起来供未来冲渲染
    使用import方法进行按需引入组件，并且在webpack打包的时候预解析我们的代码的时候，就会把import引入的模块进行单独打包，当import被调用的时候才会加载当前单独打包的文件
*/

export default {
  naem: "App",
  components: {
    Game: () => {
      // import按需加载模块是异步的 所以渲染当前按需加载的模块需要等待当前模块加载完成
      // 我们需要把import的返回值promise实例返回出来,当检测到当前的promise实例成功后，则说明模块加载完毕，就会渲染当前的模块
      return import("./components/Game");
    },
    Movie: () => {
      return import("./components/Movie");
    },
    News: () => import("./components/News"),
  },
  data() {
    return {
      comp: "",
    };
  },
};
</script>

<style></style>
